<template>
	<view class="page">
		<uni-card>
			<uni-row>
				<uni-col :span="4" class="col-left">
					<image src="../../static/clock.png" class="clock"></image>
				</uni-col>
				<uni-col :span="20">
					<text class="reservation">预约入园时间</text><br>
					<text class="time">2024年9月11日  13:30-16:00</text>
				</uni-col>
			</uni-row>
		</uni-card>
		<text class="subscriber">预约信息</text>
		<view>
			<uni-card style="overflow: visible">
			<uni-forms ref="teamForm" :modelValue="teamData" :rules="teamRules">
				<view class="texts">
					<text class="card-text">团队名称</text>
					<text class="star">*</text>
					<text class="card-text">：</text>
				</view>
				<uni-forms-item name="name">
				<input class="input" placeholder="请输入团队名称" v-model="teamData.name"
				placeholder-style="
					font-weight: 400;
					font-size: 15px;
					color: #686868;
				"/>
				</uni-forms-item>
				<view class="texts">
					<text class="card-text">团队人数</text>
					<text class="star">*</text>
					<text class="card-text">：</text>
				</view>
				<uni-forms-item name="num">
					<view>
						<uni-combox :candidates="candidates" placeholder="团队所有人数" v-model="teamData.num"></uni-combox>
					</view>
				</uni-forms-item>
			</uni-forms>
			</uni-card>
		</view>
		
		
		<view v-for="(item, peopleNum) in arr" :key="peopleNum">
			<text class="people">团队负责人{{peopleNum+1}}</text>
			<image class="del" src="../../static/delete.png" @click="delCard(peopleNum)"></image>
			<card @getCardInfo = "updateValue(peopleNum, $event)"></card>
		</view>
		
		<uni-card class="card-add">
			<button class="btn-add" @click="addCard()"><text class="add-text">✚&nbsp添加团体负责人</text></button>
		</uni-card>
		
		<button @click="submit()" class="btn-apply"><text class="apply-text">提交预约</text></button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import card from '../../pages/components/card.vue';
	import { onLoad } from '@dcloudio/uni-app';
	
	let candidates = ref(['2人', '3人', '4人', '5人','6人','7人']);
	
	//表单验证
	const teamRules = {
		name:{
			rules:[{required: true,errorMessage: '团队名称不能为空'}]
		},
		num:{
			rules:[{required: true,errorMessage: '人数不能为空'}]
		},
	};
	
	//卡片信息框
	let arr = ref([{name: 'www',type: '',number: '',tel: ''}]);
	//表单信息
	let teamData = ref({name: '',num: ''});
	
	let date = ref('');
	let time = ref('');
	onLoad((options) => {
			date = options.date
			time = options.time
		})
	
	let index = ref(1);
	let addCard = function(){
		console.log(index.value);
		
		//预约人数
		if(index.value<4){
			index.value++;
			arr.value.push({
				name: '',
				type: '',
				number: '',
				tel: ''
			})
		}else{
			alert("负责人最多限制5人");
		}
	}
	
	let delCard = function(number){
		let flag = confirm("确认删除?");
		if(flag){
			index.value--;
			arr.value.splice(number, 1);
		}
	}
	
	let updateValue = function(index, peopleInfo) {
		arr[index]=peopleInfo;
		for(let i=0;i<arr.value.length;i++){
			console.log(arr[i].value);
		}
	}

	let teamForm = ref(null);
	let peopleInfoArray = [];
	//提交预约
	let submit = function(){
		teamForm.value.validate().then(res=>{
			console.log('表单数据信息：', res);
			
			for(let i=0;i<index.value;i++){
				peopleInfoArray.push(arr[i].value);
			}
			let peopleInfoStr = JSON.stringify(peopleInfoArray);
			let teamInfoStr = JSON.stringify(teamData.value);
			uni.navigateTo({
				url:'../../pages/yy/teamsuccess?teamData=' + encodeURIComponent(teamInfoStr)
				+ '&peopleData=' + encodeURIComponent(peopleInfoStr)
			
			})
		}).catch(err =>{
			console.log('表单错误信息：', err);
		});
	}
</script>

<style>
	button::after{ border: none;}
	.del{
		width: 16px;
		height: 16px;
		padding-top: 4px;
		margin-right: 16px;
		float: right;
	}
	.people{
		margin-left: 16px;
		font-family: PingFangSC-Medium;
		font-weight: 600;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.apply-text{
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 17px;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	.btn-apply{
		border: #8DCB6D solid 1px;
		height: 45px;
		background: #8DCB6D;
		border-radius: 25px;
		margin: 0px 16px;
	}
	.container{
		display: flex;
		align-items: center; /* 垂直居中 */
		padding-bottom: 25px;
	}
	.btn-add{
		border: none;
		background-color: #FFFFFF;
	}
	.add-text{
		display: flex;
		align-items: center; /* 垂直居中 */
		justify-content: center;
		
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 15px;
		color: #323232;
		letter-spacing: 0;
	}
	.check{
		
		margin-left: -4px;
	}
	.mag{
		opacity: 0.75;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #323232;
		letter-spacing: 0;
		line-height: 0;
	}
	.texts{
		margin-bottom: 6px;
	}
	.input{
		height: 40px;
		background: #F3F5F9;
		border-radius: 6px;
		padding-left: 14px;
		color: #000000;
	}
	.star{
		font-size: 15px;
		font-weight: 400;
		color: #e8240f;
		line-height: 0;
	}
	.card-text{
		color: #05261b;
		font-size: 15px;
		font-face: PingFangSC;
		font-weight: 400;
		line-height: 0;
		letter-spacing: 0;
		paragraph-spacing: 0;
		text-align: left;
	}
	
	.subscriber{
		margin-left: 15px;
		font-family: PingFangSC-Medium;
		font-weight: 600;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.reservation{
		width: 72px;
		height: 17px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #000000;
		letter-spacing: 0;
	}
	.time{
		width: 212px;
		height: 21px;
		font-family: PingFangSC-SNaNpxibold;
		font-weight: 600;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.checkbox{
		flex: none;
		display: flex;
		justify-content: flex-end;
	}
	.card-add{
		border: 1px dashed #8DCB6D;
		border-radius: 12px;
	}
	.col-left{
		padding-top: 4px;
	}
	.clock{
		width: 38px;
		height: 38px;
		/*opacity: 0;*/
	}
</style>
